<script setup lang="ts">
// import { ref, reactive } from 'vue'
// import { onShow } from '@dcloudio/uni-app'
// 字符串数组形式
const props = defineProps({
  bgImg: String,
  navType: String,
  navText: String,
  search:String,
  backPageNum: Number,
  bgColor: String
})
const goBack = () => {
  uni.navigateBack({
    delta: props.backPageNum ? props.backPageNum : 1
  })
}
const goSearch = () =>{
    uni.navigateTo({
        url:`/pagesA/search/index?type=${props.search}`
    })
}
console.log('props===>', props)
</script>
<template>
  <view class="header-common" :class="props.navType ? 'header' : 'header-detail'" :style="{background: props.bgColor ? props.bgColor : ''}">
    <view v-if="props.navText" class="header-back">
      <up-icon name="arrow-left" color="#333333" size="22" @click="goBack"></up-icon>
      <view v-if="props.search" style="margin-left: 20px;">
        <up-icon name="search" color="#333333" size="24" @click="goSearch"></up-icon>
      </view>
      <text :style="{paddingRight: props.search ? '65px' : '45px'}" style="flex: 1;text-align: center;z-index: 9999;color: rgba(0, 0, 0, 0.9);font-weight: 500;font-family: PingFang SC;">{{ props.navText }}</text>
    </view>
    <image v-else class="img" src="../static/logo.png" alt="" />
  </view>
</template>

<style lang="scss" scoped>
.header-common {
  width: 100%;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 999;
  height: 88px;
  padding-bottom: 8px;
  // background: #fff;
  // background-size: 100%;
  // background-repeat: no-repeat;
  .header-back {
    width: 95%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-top: 45px;
    .u-icon {
      padding-left: 15px;
    }
  }
}
.header{
  background: #fff;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.header-detail {
  // background: red;
  display: flex;
  align-items: center;
  justify-content: center;
  // padding: 0 15px;
}
.img {
  width: 160px; 
  height: 24px;
  padding: 54px 0 0 15px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
</style>
